var Model = (function () {
    class Model {
        constructor() {
            console.log("初始化了")
            // 遮罩
            this.mask = null;
            // 内容面板
            this.panel = null;
            // 关闭按钮
            this.closeBtn = null;
            // 装载关闭按钮的面板
            this.titlePanel = null;
            // 装载内容的面板
            this.contentPanel = null;
            // 内容
            this.content = null;
            // 内容中的文本容器
            this.textContainer = null;

            this.init();
        }

        init() {
            this.render();
            this.setStyle();
            this.bindEvent();
        }

        // 创建结构方法
        render() {
            // 遮罩
            this.mask = document.createElement("div");
            // 内容面板
            this.panel = document.createElement("div");
            // 关闭按钮
            this.closeBtn = document.createElement("span");
            // 装载内容的面板
            this.contentPanel = document.createElement("div");
            // 装载标题的面板
            this.titlePanel = document.createElement("div");
            // 文字内容容器
            this.textContainer = document.createElement("div");
            // 将内容面板装入遮罩
            this.mask.appendChild(this.panel)
            // 将标题面板装入内容面板
            this.panel.appendChild(this.titlePanel);
            // 将关闭按钮装入标题面板
            this.titlePanel.appendChild(this.closeBtn);
            // 将装载内容的面板装入内容面板
            this.panel.appendChild(this.contentPanel);
            // 将装载具体文字的容器放入内容面板
            this.contentPanel.appendChild(this.textContainer);
        }

        // 样式
        setStyle() {
            /* 设置面罩的样式 */
            var obj = {
                position: "fixed",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: "rgba(0, 0, 0, .3)",
                display: "flex",
                justifyContent: "center",
                alignItems: "center"
            }
            for (var i in obj) {
                this.mask.style[i] = obj[i];
            }

            /* 设置内容面板的样式 */
            var obj = {
                width: "30%",
                minHeight: "300px",
                background: "white",
                display: "flex",
                flexDirection: "column"
            }
            for (var i in obj) {
                this.panel.style[i] = obj[i]
            }



            /* 装载标题的面板 */
            var obj = {
                height: "10%",
                maxHeight: "50px",
                minHeight: "30px",
                borderBottom: "1px solid #ccc",
                position: "relative"
            }
            for (var i in obj) {
                this.titlePanel.style[i] = obj[i];
            }

            /* 装载内容的面板 */
            var obj = {
                flex: 1,
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                padding: "10px",
                textAlign: "center"
            }
            for (var i in obj) {
                this.contentPanel.style[i] = obj[i];
            }

            /* 设置关闭按钮的样式 */
            var obj = {
                width: "30px",
                height: "30px",
                position: "absolute",
                top: 0,
                right: 0,
                textAlign: "center",
                lineHeight: "30px",
                cursor: "pointer"
            }
            for (var i in obj) {
                this.closeBtn.style[i] = obj[i];
            }
            this.closeBtn.innerHTML = "&times;"
        }
        // 设置文本内容
        setText(text) {
            this.textContainer.innerHTML = text;
        }

        // 显示方法
        show() {
            document.body.appendChild(this.mask);
            this.mask.style.display = "flex";
        }
        // 隐藏
        hide() {
            // document.body.removeChild(this.mask)
            this.mask.style.display = "none"
        }
        // 绑定事件
        bindEvent() {
            this.closeBtn.onclick = (e) => {
                e.stopPropagation();
                this.hide();
            }

            this.mask.onclick = () => {
                this.hide();
            }
        }
    }
    // 单例
    var model = null;

    return function () {
        // 懒汉式
        if (model) {
            return model;
        } 
        model = new Model();
        return model;
    }

})()
